import { Outlet } from 'react-router-dom'
import './App.css'
import {useNavigate} from 'react-router-dom'
import axios from 'axios'
import { useEffect, useState } from 'react'
import { Select, Space } from 'antd';

function App() {
  const navigate = useNavigate()
  const [theme,setTheme] = useState(localStorage.getItem('theme')||'light')

  useEffect(()=>{
    axios.get('/api/article/list')
    checkBg(theme)
  },[])

  const checkBg = (value) =>{
    const htmlNode = document.documentElement
    // 一个
    // htmlNode.className = htmlNode.className==='dark'?'light':'dark'
    // 多个
    // const currentTheme = htmlNode.getAttribute('data-theme') || ''
    // htmlNode.setAttribute('data-theme',currentTheme==='dark'?'light':'dark')
    htmlNode.setAttribute(
      'data-theme',
      value
    )
    setTheme(value)
    localStorage.setItem('theme',value)
  }
  return (
   <div>
    <Select
      defaultValue={theme}
      style={{ width: 120 }}
      onChange={checkBg}
      options={[
        { value: 'light', label: '日间' },
        { value: 'dark', label: '夜间' },
        { value: 'green', label: '青绿色' },
        { value: 'pink', label: '少女粉' },
        { value: 'blue', label: '天空蓝' },
      ]}
    />
    {/* <button onClick={()=>checkBg()}>点击切换主题背景</button> */}
    <br />
    <button onClick={()=>navigate('/data')}>data页面</button>
    <br />
    <button onClick={()=>navigate('/data1')}>data1页面</button>
    <Outlet></Outlet>
   </div>
  )
}

export default App
